<%--
  Created by IntelliJ IDEA.
  User: 刘洪兆0720
  Date: 2022/5/16
  Time: 21:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>导入详情页</title>

    <link rel="stylesheet" href="${path}/static/bootstrap/css/bootstrap.min.css">
    <script src="${path}/static/bootstrap/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="${path}/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        body {
            background: #f1efec;
        }
    </style>
</head>

<body>
<!-- 教师修改的模态框 -->
<div class="modal fade" id="teaUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改学生信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                            <input type="text" name="stu_username" class="form-control" id="teaNumber_update_input"
                                   placeholder="学号">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="stu_name" class="form-control" id="teaName_update_static"
                                   placeholder="真实姓名">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属班级</label>
                        <div class="col-sm-10">
                            <span>不可修改</span>
                            <input type="hidden" name="stu_class" class="form-control" id="teaPassword_update_input"
                                   placeholder="所属班级">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="tea_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>
<div class="container">

    <div class="container alert navbar-inverse" style="margin-top: 50px;">
        <a href="teacher_addexam.jsp" class="btn btn-primary btn-block"><span class="glyphicon glyphicon-pencil"></span>返回</a>
    </div>

    <!-- 显示表格数据 -->
    <div class="row" style="margin-top: 30px">
        <div class="col-md-12">
            <strong style="display:block;margin-left: 20px; font-size: 18px">学生信息</strong>
            <!--分页文字信息  -->
            <div class="col-md-8 text-start" id="page_info_area"
                 style="margin-bottom: 10px;margin-left:5px;margin-top:20px;font-size: 15px;"></div>

            <table class="table table-responsive table-bordered table-striped table-hover" id="teas_table">
                <thead class="table-light">
                <tr>
                    <th class="col-md-1">序号</th>
                    <th class="col-md-3">学号</th>
                    <th class="col-md-3">姓名</th>
                    <th class="col-md-3">班级</th>
                    <th class="col-md-2">操作</th>
                </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
        </div>
    </div>

    <!-- 显示分页信息 -->
    <div class="row" style="margin-top: 100px;align-content: center">
        <!-- 分页条信息 -->
        <div class="col-md-12" id="page_nav_area" style="align-self: center"></div>
    </div>
</div>
</body>

<script type="text/javascript">
    var currentPage, totalRecord;
    //1、页面加载完成以后，直接去发送ajax请求,要到分页数据
    $(function () {
        //去首页
        to_page(1);
    });

    function to_page(pageNum) {
        $.ajax({
            url: "${path}/getBeforeStuInfo",
            data: {"pageNum": pageNum, "exam": "${param.e_name}", "e_teacher": "${param.e_teacher}"},
            type: "GET",
            success: function (pageInfo) {
                //1、解析并显示教师数据
                buildTable(pageInfo);
                //2、解析并显示分页信息
                build_page_info(pageInfo);
                //3、解析显示分页条数据
                build_page_nav(pageInfo);
            }
        });
    }

    function buildTable(pageInfo) {
        //清空table表格
        $("#teas_table tbody").empty();
        var data = pageInfo.extend.pageInfo.list;
        $.each(data, function (index, item) {
            var index = $("<td></td>").append((index + 1));
            var stuId = $("<td></td>").append(item.stu_id);
            var stuName = $("<td></td>").append(item.stu_name);
            var stuClass = $("<td></td>").append(item.stu_class);

            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            //为编辑按钮添加一个自定义的属性，来表示当前教师id
            editBtn.attr("edit-id", item.stu_exam);
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            //为删除按钮添加一个自定义的属性来表示当前删除的教师id
            delBtn.attr("del-id", item.stu_exam);
            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

            //append方法执行完成以后还是返回原来的元素
            $("<tr></tr>").append(index)
                .append(stuId)
                .append(stuName)
                .append(stuClass)
                .append(btnTd)
                .appendTo("#teas_table tbody");
        });
    }

    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前" + result.extend.pageInfo.pageNum + "页,总共" +
            result.extend.pageInfo.pages + "页,总共" +
            result.extend.pageInfo.total + "条记录");
        totalRecord = result.extend.pageInfo.total;
        currentPage = result.extend.pageInfo.pageNum;
    }

    //解析显示分页条，点击分页要能去下一页....
    function build_page_nav(result) {
        //page_nav_area
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");

        //构建元素
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if (result.extend.pageInfo.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //为元素添加点击翻页的事件
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum - 1);
            });
        }

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        if (result.extend.pageInfo.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            nextPageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum + 1);
            });
            lastPageLi.click(function () {
                to_page(result.extend.pageInfo.pages);
            });
        }

        //添加首页和前一页 的提示
        ul.append(firstPageLi).append(prePageLi);
        //1,2，3遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {

            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (result.extend.pageInfo.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页 的提示
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    //单个删除
    $(document).on("click", ".delete_btn", function () {
        //1、弹出是否确认删除对话框
        var stuName = $(this).parents("tr").find("td:eq(2)").text();
        var stuExam = $(this).attr("del-id");
        if (confirm("该门考试中确认删除【" + stuName + "】吗？")) {
            //确认，发送ajax请求删除即可
            $.ajax({
                url: "${path}/deleteOneStudent",
                type: "GET",
                data: {"stuName": stuName, "stuExam": stuExam},
                success: function (result) {
                    alert(result.msg);
                    //回到本页
                    to_page(currentPage);
                }
            });
        }
    });

    //1、我们是按钮创建之前就绑定了click，所以绑定不上。
    //1）、可以在创建按钮的时候绑定。    2）、绑定点击.live()
    //jquery新版没有live，使用on进行替代
    $(document).on("click", ".edit_btn", function () {
        //1、查出教师信息，显示教师信息
        var stuId = $(this).parents("tr").find("td:eq(1)").text();
        var stuExam = $(this).attr("del-id");
        getTea(stuId, stuExam);

        //2、把教师的id传递给模态框的更新按钮
        $("#tea_update_btn").attr("edit-id", $(this).attr("edit-id"));
        $("#teaUpdateModal").modal({
            backdrop: "static"
        });
    });

    function getTea(stuId, stuExam) {
        $.ajax({
            url: "${path}/teacher_get_student",
            data: {"stuId": stuId, "stuExam": stuExam},
            type: "GET",
            success: function (result) {
                var teaData = result.extend.student;
                $("#teaName_update_static").val(teaData.stu_name);
                $("#teaNumber_update_input").val(teaData.stu_username);
                $("#teaPassword_update_input").val(teaData.stu_class);
            }
        });
    }

    //点击更新，更新信息
    $("#tea_update_btn").click(function () {

        //2、发送ajax请求保存更新的教师数据
        $.ajax({
            url: "${path}/editStuInfo",
            type: "POST",
            data: $("#teaUpdateModal form").serialize(),
            success: function () {
                //1、关闭对话框
                $("#teaUpdateModal").modal("hide");
                //2、回到本页面
                to_page(currentPage);
            }
        });
    });
</script>
</html>
